<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-row :gutter="24" style="display: flex; justify-content: space-between">
				<el-col :span="4">
					<el-card class="card">
						<div class="img">
							<img src="../../assets/kanban/1.png" />
						</div>
						<div class="conter" style="color: #daa85d">{{ Number(cardData.aaa).toLocaleString() }}</div>
						<div class="title">代码总数</div>
					</el-card>
				</el-col>
				<el-col :span="4">
					<el-card class="card">
						<div class="img">
							<img src="../../assets/kanban/2.png" />
						</div>
						<div class="conter" style="color: #ef3b78">{{ Number(cardData.bbb).toLocaleString() }}</div>
						<div class="title">已审核数</div>
					</el-card>
				</el-col>
				<el-col :span="4">
					<el-card class="card">
						<div class="img">
							<img src="../../assets/kanban/3.png" />
						</div>
						<div class="conter" style="color: #8872ca">{{ Number(cardData.ccc).toLocaleString() }}</div>
						<div class="title">待审核数</div>
					</el-card>
				</el-col>
				<el-col :span="4">
					<el-card class="card">
						<div class="img">
							<img src="../../assets/kanban/4.png" />
						</div>
						<div class="conter" style="color: #52a854">{{ Number(cardData.ddd).toLocaleString() }}</div>
						<div class="title">问题代码数</div>
					</el-card>
				</el-col>
				<el-col :span="4">
					<el-card class="card">
						<div class="img">
							<img src="../../assets/kanban/5.png" />
						</div>
						<div class="conter" style="color: #1e80e7">{{ Number(cardData.eee).toLocaleString() }}</div>
						<div class="title">今日新增数</div>
					</el-card>
				</el-col>
			</el-row>
			<el-row :gutter="24" style="display: flex; justify-content: space-between; margin-top: 20px; box-sizing: border-box">
				<el-col :span="18">
					<el-card class="cards">
						<div class="title">帮助文档</div>
						<el-table
							:data="state.dataList"
							v-loading="state.loading"
							style="width: 100%"
							height="460"
							stripe="true"
							:cell-style="tableStyle.cellStyle"
							:header-cell-style="tableStyle.headerCellStyle"
						>
							<el-table-column prop="aaa" label="名称">
								<template #default="scope">
									<el-button text type="primary">{{ scope.row.aaa }}</el-button>
								</template>
							</el-table-column>
							<el-table-column prop="bbb" label="功能描述"></el-table-column>
						</el-table>
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card class="cards">
						<div class="title">消息通知</div>
						<el-scrollbar style="width: 100%; height: 460px">
							<div class="notification" v-for="item in notificationList" :key="item.id">
								<el-badge :is-dot="item.dot">
									<div class="notification-left">
										<img src="../../assets/kanban/lama.png" width="25px" height="25px" v-if="item.dot == true" />
										<img src="../../assets/kanban/huiselama.png" width="25px" height="25px" v-else />
									</div>
								</el-badge>
								<div class="notification-right">
									<div class="notification-right-top">{{ item.title }}</div>
									<div class="notification-right-bottom">{{ item.time }}</div>
								</div>
							</div>
						</el-scrollbar>
					</el-card>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script setup lang="ts" name="auditKanban">
import { BasicTableProps, useTable } from '/@/hooks/table';

// 页面加载时
onMounted(() => {
	getDataList();
});

// 定义变量内容
const cardData = {
	aaa: '23128',
	bbb: '16782',
	ccc: '6280',
	ddd: '280',
	eee: '28',
};
const notificationList = [
	{ id: '1', dot: true, title: '消息内容消息内容消息内容消息', time: '2024-04-15 15:30' },
	{ id: '2', dot: false, title: '消息内容消息内容消息内容消息', time: '2024-04-15 15:30' },
	{ id: '3', dot: false, title: '消息内容消息内容消息内容消息', time: '2024-04-15 15:30' },
	{ id: '4', dot: false, title: '消息内容消息内容消息内容消息', time: '2024-04-15 15:30' },
	{ id: '5', dot: false, title: '消息内容消息内容消息内容消息', time: '2024-04-15 15:30' },
	{ id: '6', dot: false, title: '消息内容消息内容消息内容消息', time: '2024-04-15 15:30' },
	{ id: '7', dot: false, title: '消息内容消息内容消息内容消息', time: '2024-04-15 15:30' },
	{ id: '8', dot: false, title: '消息内容消息内容消息内容消息', time: '2024-04-15 15:30' },
	{ id: '9', dot: false, title: '消息内容消息内容消息内容消息', time: '2024-04-15 15:30' },
	{ id: '10', dot: false, title: '消息内容消息内容消息内容消息', time: '2024-04-15 15:30' },
	{ id: '11', dot: false, title: '消息内容消息内容消息内容消息', time: '2024-04-15 15:30' },
];
const state: BasicTableProps = reactive<BasicTableProps>({
	createdIsNeed: false,
	queryForm: {
		data: {},
	},
	dataList: [
		{ aaa: '帮助文档1', bbb: '功能描述功能描述功能描述功能描述功能描述功能描述功能描述' },
		{ aaa: '帮助文档2', bbb: '功能描述功能描述功能描述功能描述功能描述功能描述功能描述' },
		{ aaa: '帮助文档3', bbb: '功能描述功能描述功能描述功能描述功能描述功能描述功能描述' },
		{ aaa: '帮助文档4', bbb: '功能描述功能描述功能描述功能描述功能描述功能描述功能描述' },
		{ aaa: '帮助文档5', bbb: '功能描述功能描述功能描述功能描述功能描述功能描述功能描述' },
		{ aaa: '帮助文档6', bbb: '功能描述功能描述功能描述功能描述功能描述功能描述功能描述' },
		{ aaa: '帮助文档7', bbb: '功能描述功能描述功能描述功能描述功能描述功能描述功能描述' },
		{ aaa: '帮助文档8', bbb: '功能描述功能描述功能描述功能描述功能描述功能描述功能描述' },
		{ aaa: '帮助文档9', bbb: '功能描述功能描述功能描述功能描述功能描述功能描述功能描述' },
		{ aaa: '帮助文档10', bbb: '功能描述功能描述功能描述功能描述功能描述功能描述功能描述' },
	],
	// pageList: pageList,
});
const { getDataList, tableStyle } = useTable(state);
</script>
<style lang="scss" scoped>
.card {
	display: flex;
	justify-content: center;
	align-items: center;
	.img {
		width: 100px;
		height: 100px;
		border-radius: 50%;
	}
	.conter {
		width: 100px;
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28px;
		font-weight: 500;
	}
	.title {
		width: 100px;
		height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #666666;
	}
}
.cards {
	width: 100%;
	height: 520px;
	.title {
		width: 100%;
		font-size: 14px;
		flex-wrap: 400;
		color: #000000;
	}
}
.notification {
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	border-bottom: 1px dashed #e5ebf4;
	.notification-left {
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		background: #f8f8f8;
	}
	.notification-right {
		width: 80%;
		height: 100%;
		font-size: 13px;
		padding: 10px;
		.notification-right-top {
			color: #666666;
		}
		.notification-right-bottom {
			color: #999999;
		}
	}
}
</style>
